import React from 'react'
import { CapsuleTabs ,Checkbox, Space} from 'antd-mobile'
import { Calendar, Cell } from 'react-vant'
import {
    Form,
    Input,
    Button,
} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
function index() {
    const nav = useNavigate()
    const onFinish = (values) => {
        console.log(values);
        nav('/list',{state:values})
    };
    return (
        <div>
            <CapsuleTabs>
                <CapsuleTabs.Tab title='机票' key='fruits'>
                    机票
                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab title='国内火车' key='vegetables'>
                    <CapsuleTabs>
                        <CapsuleTabs.Tab title='单程' key='fruit'>
                            <Form
                            onFinish={onFinish}
                                layout='horizontal'
                                footer={
                                    <Button block type='submit' color='primary' size='large'>
                                        提交
                                    </Button>
                                }
                            >
                                <Form.Item
                                    name='start'
                                    label='出发地'
                                >
                                    <Input placeholder='请输入出发地' />
                                </Form.Item>
                                <Form.Item
                                    name='end'
                                    label='目的地'
                                >
                                    <Input placeholder='请输入目的地' />
                                </Form.Item>
                                <Form.Item>
                                    <Calendar>
                                        {(val, actions) => (
                                            <Cell
                                                isLink
                                                title='单个日期'
                                                value={val ? val.toLocaleDateString() : '请选择日期'}
                                                onClick={() => actions.open()}
                                            />
                                        )}
                                    </Calendar>
                                </Form.Item>
                                <Form.Item>
                                        <Checkbox>学生票 </Checkbox>
                                        <Checkbox>学生票 </Checkbox>
                                </Form.Item>
                            </Form>
                        </CapsuleTabs.Tab>
                        <CapsuleTabs.Tab title='往返' key='vegetable'>
                            往返
                        </CapsuleTabs.Tab>
                    </CapsuleTabs>
                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab title='国际/港台' key='animals'>
                    国际/港台
                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab title='汽车票' key='kkk'>
                    汽车票
                </CapsuleTabs.Tab>
            </CapsuleTabs>
        </div>
    )
}

export default index